<template>
  <div>
    <div  v-if="cdata.certStatus" class="carinfo">

      <h3>
        {{cdata.carNumber}}

        <label style="font-weight: normal">

          <el-tag  v-if="cdata.certStatus =='REVIEW'" size="mini" effect="plain">
            审核中
          </el-tag>
          <el-tag  v-if="cdata.certStatus =='PASS'" size="mini" effect="plain">
            认证通过
          </el-tag>
          <el-tag  v-if="cdata.certStatus =='NOTPASS'" size="mini" effect="plain">
            认证未通过
          </el-tag>



          <el-tag  v-if="cdata.usedStatus =='FREEING'" size="mini" type="success" effect="plain">
            空闲中
          </el-tag>
          <el-tag  v-if="cdata.usedStatus =='WAITING'" size="mini" type="success" effect="plain">
            待签约
          </el-tag>
          <el-tag  v-if="cdata.usedStatus =='SIGNED'" size="mini" type="success" effect="plain">
            已签约
          </el-tag>
          <el-tag  v-if="cdata.usedStatus =='USING'" size="mini" type="success" effect="plain">
            租用中
          </el-tag>
        </label>
      </h3>
      <div v-if="!modifyCar" class="infob">
        <div class="ccitems">

            <span>月租金</span>
          <label style="color: #FF5D32"> {{cdata.monthAmount}}元</label>
        </div>
        <div  class="ccitems">
         <span>结算周期(月)</span>
            <label v-if="cdata.cycle=='M'">1</label>
          <label v-if="cdata.cycle=='Q'">3</label>
          <label v-if="cdata.cycle=='Y'">12</label>
        </div>



      </div>
      <div class="modifycar" v-if="modifyCar">
        <div class="lbox">
          <ul>
            <li>
              <label class="labelName">月租金</label>
              <div  class="labelCon modic" style="color:#FF2126">
                <input type="text" class="mputBox" @input="oninput" v-model="cdata.monthAmount"/>
              </div>
            </li>
            <li>
              <label class="labelName">结算周期</label>
              <div class="labelCon">
                <el-radio-group v-model="cdata.cycle">
                  <el-radio :label="'M'">月度</el-radio>
                  <el-radio :label="'Q'">季度</el-radio>
                  <el-radio :label="'Y'">年度</el-radio>
                </el-radio-group>
              </div>

            </li>

          </ul>
        </div>

      </div>



    </div>
    <div class="shtips" v-if="cdata.certStatus =='REVIEW'">

      您的车辆信息正在审核中，预计将在1-2个工作日完成审核。
      感谢您对优享车的支持！

    </div>

    <div v-if="cdata.certStatus =='NOTPASS'">
      <div    class="reason">
        驳回原因:{{cdata.approveDesc?cdata.approveDesc:'管理员没有填写'}}
      </div>
      <div class="libtn">
        <ul>

        </ul>
        <button   @click="modifyCar = true" v-if="!modifyCar" class="buttonOk">修改价格</button>

      </div>
    </div>

    <div class="modifyTips" v-if="modifyCar">
      注：修改后需要经过审批,下次签约时生效。
    </div>
    <div class="libtn" v-if="cdata.certStatus">
      <button v-if="modifyCar" @click="saveNewCar()" class="buttonOk">确认修改</button>
      <button v-if="cdata.certStatus =='PASS' && !modifyCar" @click="modifyCar = true" class="buttonOk">修改</button>
      <button   @click="resubCar()" v-if="cdata.certStatus =='NOTPASS'" >重新提交</button>
    </div>
    <div v-if="!cdata.certStatus">
      <div class="yxcnoreg">
        <img src="./imgs/noreg.png" style="margin-top:30%;z-index: -1;"/>
        <div class="noreg_tpis">
          尚无车辆信息<br>
          <label @click="goregCar()">

            立即出租豪车

          </label>
        </div>
      </div>
    </div>




  </div>
</template>

<script>
  export default {
    name: "car-infos",
    data(){
      return{
        radio:'',
        modifyCar:false,
        cdata:{}
      }
    },
    created(){
      this.getcar()

    },
    methods:{
      oninput(e) {
        var that = this
        // 通过正则过滤小数点后两位
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
        that.cdata.monthAmount = e.target.value;
        // console.log('e', e.target.value)
      },
      resubCar(){
        localStorage.removeItem('cinfo')
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'pcar1'
          }
        })
      },
      saveNewCar(){
        // var pdata={
        //
        //   "cycle":this.cdata.cycle,//结算周期,
        //   "carNumber":this.cdata.carNumber,//车牌
        //   "monthAmount":this.cdata.monthAmount,//月租金
        //
        //
        // }

        // if(this.cdata.monthAmount<3000 || this.cdata.monthAmount>20000){
        //   this.$toast('月租金应该在3000-20000之间')
        //   return false;
        // }

        var totalMoney=this.cdata.monthAmount
        if(this.cdata.cycle=='Q'){
          totalMoney=this.$options.filters.accMul(totalMoney,4)
        }
        if(this.cdata.cycle=='Y'){
          totalMoney=this.$options.filters.accMul(totalMoney,12)
        }

        if(totalMoney>100000){
          this.$toast('单笔租金结算金额不能超过10万元，请调整您的月租金或租用期限')
          return false;
        }

        this.$mPromot({
          width: '80%',
          title: '提示',
          funCode: 'comfims',
          props: {
            btn2:'确定',
            type:'confirm',
            info: '<span style="color:red;">您确定保存吗？保存后将进入租金审核程序</span>'
          },
          callback: (close,str) => {
          if(str){
            this.savemycar()
          }
          close();
      }
      })

      },
      savemycar(){
        this.$http.post('yxc/car/resubmit',this.cdata).then(res=>{
          if(res.code == 200){
          this.$toast('修改成功，下次签约时候生效',3000)
          this.modifyCar = false;
          this.getcar();
        }else{
          this.$toast(res.message)
        }
      })
      },
      goregCar(){
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'pcar1'
          }
        })
      },
      getcar(){

          this.$http.get('yxc/car/viewByWxUserId').then(res=>{
            if(res.code == 200){
            this.cdata = res.data
          }
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  .shtips{
    font-size:12px;color:#666;
    padding:0px 20px;
  }
  .modic{
    position: relative;
    input{
      outline: none;
      width:100%;
      color:red;
    }
  }
  .modic:after{
    position: absolute;
    top:0px;
    right:10px;
    content:'元'
  }

  .modifyTips{
    color:#FF9600;
    font-size:12px;
    padding:0 0 30px 20px;
  }
  .libtn {
    border: none;
    text-align: center;
    .buttonOk {
      padding:10px 0;
      border-radius: 5px;
      border: none;
      background:rgba(28,103,255,1);
      color: #FFF;
      font-size: 35px;
      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
      width: 90%;
      font-size:18px;
      margin-bottom: 10px;
    }.buttonCancle {
       padding:10px 0;
       border-radius: 5px;

       border:1px solid rgba(191,191,191,1);
       background: #FFF;
       color: #666;
       font-size: 35px;
       /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
       width: 90%;
       font-size:18px;
     }
  }

  .yxcnoreg{
    text-align: center;
    img{width:50%; position: relative;top:50px;}
    font-size:14px;
    .noreg_tpis{
      padding:10px;
      label{
        color:#FF9600;
      }
    }


  }
  .lbox{
    padding:0 0px;
    li{border-bottom: 1px solid #eee;padding:15px 0; font-size: 14px;
      display: flex;
      .labelName{width:90px;}
      .labelCon{
        width:100%;
      }
    }
    li:last-child{border-bottom: none;}
  }
  .el-radio{
    margin-right: 10px;
  }
    .modifycar{

    }
    .carinfo{
      margin:15px;
      border-radius: 5px;
      background: #FFF;
      padding:10px;
      h3{
        border-bottom: 1px dashed #EEE;
        margin:0;padding:0;
        padding:0 0 10px 0;
        font-size:16px;
      }
      .infob{
        padding:10px 0 0 0;
        font-size:14px;
        display: flex;
        .ccitems{width:50%;
          text-align: center;
          span{color:#999;display: block;padding-bottom: 10px;}
          label{
            display: block;
          }
        }

      }
    }
  .reason{
    color:#F60;font-size:12px;
    padding:10px 20px;
  }
</style>
